<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      id="nav-bar"
      title="我的订单"
      :custom-back="customBack"
    ></u-navbar>
    <u-tabs
      :list="tabList"
      :is-scroll="false"
      :current="tabCurrent"
      @change="change"
    ></u-tabs>
    <!-- 订单列表 -->
    <!-- <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      top="0"
      @down="downCallback"
      :up="upOption"
      @up="upCallback"
    > -->
    <!-- 订单状态：-1关闭订单，0待支付，1已支付,2已发货,3已完成 -->
    <view class="order-list">
      <view class="order-item" v-for="item in orderList" :key="item.id">
        <view class="order-item-in">
          <view class="product">
            <view class="u-flex u-row-between">
              <view class="titleBox">
                <image
                  class="img"
                  src="/static/images/icon-tzgg.png"
                  mode="aspectFill"
                />
                <text class="txt">{{ item.remark }}</text>
              </view>
              <view class="status">{{ item.status }}</view>
            </view>
          </view>

          <view class="products">
            <view
              v-for="product in item.products"
              :key="product.id"
              class="product"
            >
              <image
                class="product-img"
                :src="product.img"
                mode="scaleToFill"
              />

              <view class="productInfo">
                <view class="product-name">{{ product.name }}</view>
                <view class="product-tags"
                  ><text class="tag">扫码类</text></view
                >
                <view class="product-other u-flex u-row-between">
                  <view class="price"> ¥{{ item.price }} </view>
                  <view class="num">x{{ item.num }}</view>
                </view>
              </view>
            </view>
          </view>

          <view class="address">{{ item.address }}</view>

          <view class="total">
            <text class="total-num">共计{{ item.num }}件</text>
            <view class="total-price">
              <text class="label">合计：</text>
              <text class="unit">￥</text>
              <text class="price">{{ item.price }}</text>
              <text class="deduction">已抵扣￥11.10</text>
            </view>
          </view>

          <view class="footer">
            <template v-if="tabCurrent == 1">
              <view class="btn0 mr20" @click="handleCancelOrder(item)">
                取消订单
              </view>
              <view class="btn0 mr20" @click="handleCancelOrder(item)">
                修改地址
              </view>
              <view class="btn1" @click="handlePayNow(item)"> 立即付款</view>
            </template>
            <template v-if="tabCurrent == 2">
              <view class="btn1" @click="handleViewLogistics(item)">
                查看物流
              </view>
            </template>
            <template v-if="tabCurrent == 3">
              <view class="btn1" @click="handleRemind()"> 自主激活 </view>
            </template>
            <template v-if="tabCurrent == 3">
              <view class="btn1" @click="handleHelp()"> 代理协助 </view>
            </template>
            <!-- </view> -->
          </view>
        </view>
      </view>
    </view>
    <!-- </mescroll-body> -->
  </view>
</template>
<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import service from '@/common/service';
import util from '@/common/utils';

export default {
  mixins: [MescrollMixin],
  data() {
    return {
      upOption: {
        page: {
          num: 0,
          size: 10,
        },
        noMoreSize: 5,
        empty: {
          icon: 'https://api.hjsfpay.com/image/newimg/all-noData.png',
          tip: '',
        },
      },
      mescroll: null,
      tabList: [
        {
          name: '全部',
          count: 0,
        },
        {
          name: '待付款',
          count: 0,
        },
        {
          name: '待发货',
          count: 0,
        },
        {
          name: '待收货',
          count: 0,
        },
        {
          name: '已完成',
          count: 0,
        },
        {
          name: '已取消',
          count: 0,
        },
        {
          name: '退款售后',
          count: 0,
        },
      ],
      tabCurrent: 0,
      orderList: [
        {
          id: 0,
          remark: '快递寄送',
          price: 100,
          products: [
            {
              id: 0,
              name: '商品名称',
              price: 100,
              num: 2,
              tags: '扫码类,平台兑换',
              img: 'https://img11.360buyimg.com/n1/jfs/t1/219016/5/45348/58267/67101f0bF920a32a0/37863718eccc1fdb.jpg',
            },
            {
              id: 1,
              name: '商品名称',
              price: 100,
              num: 2,
              tags: '扫码类,平台兑换',
              img: 'https://img11.360buyimg.com/n1/jfs/t1/219016/5/45348/58267/67101f0bF920a32a0/37863718eccc1fdb.jpg',
            },
          ],
          num: 2,
          createTime: '2020-01-01 00:00:00',
          status: '待付款',
          address:
            '收货地址:福建省福州市鼓楼区鳌峰街道万科金融港3-506 科金融港3-506',
        },
      ],
      currentData: {},
      fileUrl: service.getFileUrl(),
    };
  },
  onLoad(e) {
    if (e.tab) {
      this.tabCurrent = Number(e.tab);
    }
  },
  methods: {
    customBack() {
      uni.switchTab({
        url: '/pages/my/index',
      });
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    downCallback() {
      this.orderList = [];
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.getTradePage(page);
    },
    getTradePage(page) {
      const that = this;
      const param = {
        pageNumber: page.num,
        pageSize: page.size,
        status: that.tabCurrent,
      };
      service.getTradePage(
        param,
        function (res) {
          if (res && res.data) {
            that.mescroll.endSuccess(res.data.data.length);
            if (page.num == 1) that.orderList = [];
            that.orderList = that.orderList.concat(res.data.data);
          }
        },
        function (res) {}
      );
    },
    change(index) {
      this.tabCurrent = index;
      this.orderList = [];
      this.mescroll.resetUpScroll();
    },
    handleCancelOrder(data) {
      const that = this;
      uni.showModal({
        title: '提示',
        content: '确认取消该订单?',
        cancelText: '取消',
        confirmText: '确定',
        showCancel: true,
        confirmColor: '#CC921F',
        cancelColor: '#999999',
        success: (res) => {
          if (res.confirm) {
            const param = {
              id: data.id,
            };
            service.tradeCancel(
              param,
              function (res) {
                if (res && res.status == 1) {
                  util.showToast('取消成功');
                  that.orderList = [];
                  that.mescroll.resetUpScroll();
                }
              },
              function (res) {}
            );
          } else {
            console.log('else', res);
          }
        },
      });
    },
    handlePayNow(data) {
      const params = {
        orderId: data.id,
        payFrom: 1,
        payType: 1,
        payAmount: data.price,
        buyNum: 1,
      };
      service.wxPay(
        params,
        function (res) {
          if (res && res.data) {
            const { data } = res;
            if (data.url) {
              let orderInfo = data.url.split('&amp;').join('&');
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: orderInfo,
                success: function (res) {
                  util.showToast('支付成功');
                  setTimeout(() => {
                    uni.navigateTo({
                      url: '/pages/my/order?from=my&tab=1',
                    });
                  }, 1500);
                },
                fail: function (err) {
                  console.error(err);
                  util.showToast('支付失败');
                },
              });
            } else {
              util.showToast('支付失败，请重试');
            }
          }
        },
        function (res) {}
      );
    },
    handleViewLogistics(data) {
      // if (data.list.length > 1) {
      // uni.navigateTo({ url: "/pages/order/viewLogistics?id=" + data.id });
      // } else {
      //   this.getLogisticsByTradeId(data.id);
      // }
      if (!data.expressNo) {
        util.showToast('暂无物流消息');
        return;
      }
      uni.setClipboardData({
        data: data.expressNo,
        success: function (res) {
          util.showToast('物流单号已复制到剪切板');
        },
      });
      // const params = {
      //   id: data.id,
      // };
      // service.sureOrder(
      // 	params,
      // 	function (res) {
      // 	  if (res && res.data) {
      // 		util.showToast("确认收货成功");
      // 		that.mescroll.resetUpScroll();
      // 	  }else{
      // 		  util.showToast(res.message);
      // 	  }
      // 	},
      // 	function (res) {}
      // )
    },
    getLogisticsByTradeId(orderId) {
      const that = this;
      const params = {
        id: orderId,
      };
      service.getLogisticsByTradeId(
        params,
        function (res) {
          if (res && res.data) {
            uni.navigateTo({
              url:
                '/pages/order/logisticsDetails?data=' +
                JSON.stringify(res.data[0]),
            });
          } else {
            util.showToast(res.message);
          }
        },
        function (res) {}
      );
    },
    handleRemind() {
      uni.navigateTo({
        url: '/pages/home/noviceClassroom',
      });
    },
    handleHelp() {
      service.getParentPhone(
        {},
        function (res) {
          if (res && res.data) {
            uni.makePhoneCall({
              phoneNumber: res.data,
            });
          } else {
            uni.makePhoneCall({
              phoneNumber: '4000150806',
            });
          }
        },
        function (res) {}
      );
    },
    handleDelete(data) {
      const that = this;
      uni.showModal({
        title: '提示',
        content: `确认删除该订单？`,
        showCancel: true,
        cancelText: '取消',
        confirmText: '确认',
        confirmColor: '#CC921F',
        success: function (res) {
          if (res.cancel) {
            return;
          }
          const params = {
            id: data.id,
          };
          service.removeTrade(
            params,
            function (res) {
              if (res && res.data) {
                util.showToast('删除成功');
                that.downCallback();
              }
            },
            function (res) {}
          );
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  text-align: center;
  background-color: #f5f5f5;
}

.order-list {
  width: 100%;
  padding: 0 30rpx 60rpx;
  background-color: transparent;
  .order-item {
    margin-top: 40rpx;
    width: 100%;
    background-color: #fff;
    border-radius: 10rpx;
    .order-item-in {
      width: 100%;
      padding: 30rpx 30rpx 44rpx;
      overflow: hidden;
      .product {
        width: 100%;
        .titleBox {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          position: relative;
          .img {
            position: absolute;
            top: -10rpx;
            right: -16rpx;
            width: 32rpx;
            height: 32rpx;
            z-index: 1;
          }
          .txt {
            position: relative;
            margin-left: 10rpx;
            font-size: 26rpx;
            font-weight: bold;
            color: #333333;
            line-height: 1;
            text-align: left;
            z-index: 9;
          }
        }
        .status {
          line-height: 1;
          font-family: PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 24rpx;
          color: #f03434;
        }
        .createTime {
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          line-height: 1;
          text-align: right;
        }
      }
    }
  }
}

button::after {
  border: none;
}

.margin-top-30 {
  margin-top: 30rpx;
}

.products {
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
  width: 100%;
  .product {
    display: flex;
    width: 100%;
    margin-bottom: 40rpx;
    .product-img {
      width: 120rpx;
      height: 120rpx;
      overflow: hidden;
      border-radius: 16rpx;
    }
    .productInfo {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      .product-name {
        font-family: PingFang SC, sans-serif;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
        line-height: 1.5;
        text-align: left;
      }

      .product-tags {
        display: flex;
        margin-top: 15rpx;
        width: 100%;
        .tag {
          height: 30rpx;
          padding: 0 7rpx;
          font-family: PingFang SC, sans-serif;
          font-weight: 500;
          font-size: 22rpx;
          color: #b7926e;
          line-height: 30rpx;
          background: #fff2e5;
          border-radius: 6rpx;
          border: 1px solid #b7926e;
        }
      }

      .product-other {
        margin-top: 20rpx;
        width: 100%;
        .price {
          font-family: PingFang SC, sans-serif;
          font-weight: 800;
          font-size: 28rpx;
          color: #e52e2e;
          line-height: 1;
        }

        .num {
          font-family: PingFang SC, sans-serif;
          font-weight: bold;
          font-size: 26rpx;
          color: #222222;
          line-height: 1;
        }
      }
    }
  }
}

.address {
  width: 100%;
  height: auto;
  padding: 9rpx 13rpx 15rpx;
  font-family: PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 22rpx;
  color: #999999;
  line-height: 1.5;
  text-align: left;
  background: #f5f5f5;
  border-radius: 10rpx;
}

.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  width: 100%;
  .btn0 {
    width: 130rpx;
    height: 48rpx;
    line-height: 48rpx;
    padding: 0;
    font-size: 24rpx;
    font-weight: normal;
    color: #b7926e;
    background: #f5e9dc;
    border-radius: 24rpx;
  }
  .btn1 {
    width: 130rpx;
    height: 48rpx;
    line-height: 48rpx;
    padding: 0;
    font-size: 24rpx;
    font-weight: normal;
    color: #ffffff;
    border: none;
    background: linear-gradient(90deg, #d9b189, #c5a27f);
    border-radius: 24rpx;
  }
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30rpx;
  width: 100%;
  .total-num {
    font-family: PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
    line-height: 1;
  }
  .total-price {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    line-height: 1;
    .label {
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      font-size: 24rpx;
      color: #333333;
    }
    .unit {
      font-family: PingFang SC, sans-serif;
      font-weight: bold;
      font-size: 26rpx;
      color: #e52e2e;
    }
    .price {
      font-family: DIN, sans-serif;
      font-weight: bold;
      font-size: 42rpx;
      color: #e52e2e;
    }

    .deduction {
      margin-left: 14rpx;
      font-family: PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 24rpx;
      color: #e52e2e;
    }
  }
}
</style>
